<script setup>
import { ref } from 'vue'
import { useStudentStore } from '../../stores/student'

const studentStore = useStudentStore()

const emit = defineEmits(['confirm'])

// 激活天数表单
const form = ref({
  activeDays: 30
})

// 常用天数选项
const dayOptions = [7, 30, 90, 180, 365]

// 对话框可见性
const dialogVisible = ref(false)

// 重置表单
const resetForm = () => {
  form.value = {
    activeDays: 30
  }
}

// 打开对话框
const openDialog = () => {
  resetForm()
  dialogVisible.value = true
}

// 确认激活
const handleConfirm = () => {
  emit('confirm', form.value)
  dialogVisible.value = false
}

// 快速选择天数
const selectDays = (days) => {
  form.value.activeDays = days
}

// 对外暴露方法
defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog
    title="激活学生"
    v-model="dialogVisible"
    width="460px"
  >
    <div class="activate-dialog">
      <el-alert
        type="info"
        :closable="false"
        class="student-info"
      >
        已选择 {{ studentStore.selectedStudents.length }} 名学生
      </el-alert>
      
      <el-form :model="form" label-width="100px" class="activate-form">
        <el-form-item label="激活天数">
          <el-input-number 
            v-model="form.activeDays" 
            :min="1" 
            :max="3650"
            controls-position="right"
            style="width: 150px"
          />
        </el-form-item>
        
        <div class="quick-select">
          <span class="label">快速选择：</span>
          <div class="day-buttons">
            <el-button
              v-for="days in dayOptions"
              :key="days"
              size="small"
              :type="form.activeDays === days ? 'primary' : ''"
              @click="selectDays(days)"
            >
              {{ days }}天
            </el-button>
          </div>
        </div>
      </el-form>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.activate-dialog {
  padding: 10px;
}

.student-info {
  margin-bottom: 20px;
}

.quick-select {
  display: flex;
  margin-top: 12px;
  margin-left: 100px;
}

.label {
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin-right: 8px;
  flex-shrink: 0;
  line-height: 32px;
}

.day-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  background-color: var(--el-fill-color-light);
  border-color: var(--el-border-color);
  color: var(--el-text-color-regular);
}

:deep(.el-input__wrapper) {
  background-color: var(--el-bg-color);
  box-shadow: 0 0 0 1px var(--el-border-color) inset;
}

:deep(.el-form-item__label) {
  color: var(--el-text-color-regular);
}

:deep(.el-button.is-text) {
  color: var(--el-text-color-regular);
}

:deep(.el-button.is-text:not(.is-disabled):hover) {
  background-color: var(--el-fill-color-dark);
}
</style>
